import React, { useEffect, useState } from 'react'
import Echarts from '&/baseUI/EChartsUI'
import { graphic } from 'echarts'

import './index.scss'

export default function PlanMeasureCont2({data}) {
  let template = {
    tooltip:{},
    xAxis: {
      type: 'category',
      data: [],
      boundaryGap: false,
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
      position: 'right',
      axisTick: { show: false }
    },
    grid: {
      show: true,
      top: 10,
      bottom: 20,
      left: 20,
      right: 80
    },
    series: [
      {
        data: [],
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(80, 120, 255, .6)'
          },
          {
            offset: 1,
            color: 'rgb(255, 255, 255)'
          }
        ])
      }
      }
    ]
  }

  let [option, setOption] = useState(template)

  useEffect(() => {
    if(!data?.citywide_daily_power_consumption_variation) { setOption({...template}); return;}
    template.xAxis.data = data.citywide_daily_power_consumption_variation.time_list
    template.series[0].data = data.citywide_daily_power_consumption_variation.data
    setOption({...template})
  }, [data])
  
  return <div className='plan-measure-content-2'>
    <div><Echarts option={option}/></div>
    <i>用电量（千瓦时）</i>
  </div>
}
